<template>
  <div class="did-h">
    <div class="black black-h">
      <div>通过凭证ID验证凭证。</div>
      <el-tabs  @tab-click="handleClick">
        <el-tab-pane label="公钥">
          <el-row :gutter="20" class="mt3">
            <el-col :span="10" :offset="6">
              <el-form label-position="right" label-width="180px" :model="form">
                <el-form-item label="凭证ID" >
                  <el-input v-model="form.credentialId" placeholder="请输入凭证ID"></el-input>
                </el-form-item>
                <el-form-item label="发行者公钥" >
                  <el-input v-model="form.publicKey" placeholder="请输入发行者的公钥"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="did-button">
            <el-button size="medium" type="primary" @click="verification">验证凭证</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发行者DID" >
          <el-row :gutter="20" class="mt3">
            <el-col :span="10" :offset="6">
              <el-form label-position="right" label-width="180px" :model="form">
                <el-form-item label="凭证ID" >
                  <el-input v-model="form.credentialId" placeholder="请输入凭证ID"></el-input>
                </el-form-item>
                <el-form-item label="发行者DID" >
                  <el-input v-model="form.issuerDid" placeholder="请输入发行者的DID"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="did-button">
            <el-button size="medium" type="primary" @click="verification">验证凭证</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发行者DID、公钥ID">
          <el-row :gutter="20" class="mt3">
            <el-col :span="10" :offset="6">
              <el-form label-position="right" label-width="180px" :model="form">
                <el-form-item label="凭证ID" >
                  <el-input v-model="form.credentialId" placeholder="请输入凭证ID"></el-input>
                </el-form-item>
                <el-form-item label="发行者DID" >
                  <el-input v-model="form.issuerDid" placeholder="请输入发行者的DID"></el-input>
                </el-form-item>
                <el-form-item label="公钥ID" >
                  <el-input v-model="form.publicKeyId" placeholder="请输入发行者的公钥ID"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="did-button">
            <el-button size="medium" type="primary" @click="verification">验证凭证</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>


    </div>
    <div>

    </div>
    <div class="black mt1 black-height text-c" >
      {{data.msg=='Success'?data.data?'验证凭证成功':'验证凭证失败':''}}
    </div>
  </div>
</template>
<script>
import NoData from '../../../components/noData.vue';
export default {
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        credentialId: '',
        publicKey: '',
        issuerDid:null,
        publicKeyId:null
      },
      rules: {
        cptTitle: [{ required: true, message: '请输入CPT模板ID', trigger: 'blur' }],
      },
      data:'',
    };
  },
  mounted() {},
  methods: {
    verification() {
      this.data = '';
      this.verificationEvidence();
    },
    handleClick(){
      this.form = {
        credentialId: '',
            publicKey: null,
            issuerDid:null,
            publicKeyId:null
      }
    },
    async verificationEvidence(){
        let res = await this.$http.post(this.$api.credential.verifyCredential, this.form);
        if (res.code == 200) {
          this.data = res;
        }
    }
  },
};
</script>
<style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
  overflow-y: auto;
}
.black-height {
  height: calc(50% - 90px);
  overflow-y: auto;
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.add-button{
  width: 100%;
  padding:8px 0 ;
  background: #FCA400;
  color: white;
  border: 1px dashed #ccc;
  text-align: center;
  border-radius: 3px;
  margin-top: 10px;
  cursor: pointer;
}
.cursor{
  cursor: pointer;
}
.publicKey {
  display: flex;
  line-height: 30px;
  .span {
    width: 470px;
    text-align: right;
  }
  .span-key {
    width: calc(100% - 50px);
    word-break: break-word;
    white-space: pre-line;
  }
}
</style>
